html, body {
    /*设置其宽度，上下边距0 并且自动居中，填充整个页面*/
    margin: 0 auto;
}

/*设置字体：Re*/
h1 {
    color: white;
    margin-left: 10px;
}

/*网站头部*/
header {
    /*设置弹性容器*/
    display: flex;
    /*纵轴居中对齐*/
    align-items: center;
    /*网站顶栏高度*/
    height: 100px;
    /*设置背景色*/
    background-image: linear-gradient(to right, #acb6e5, #86fde8);
    /*内部组件两端对齐*/
    justify-content: space-between;
}

/*头像设置*/
img {
    width: 35px;
    height: 35px;
    /*圆化*/
    border-radius: 30px;
}

/*设置蓝颜标题颜色和间距*/
#first {
    color: white;
}

#second {
    color: #ffce45;
    margin-left: 0;
}

/*设置顶栏标题字体位置*/
#font {
    display: flex;
    justify-content: center;
    margin-left: 3%;
}

/*设置顶栏头像和账户名为水平弹性盒子*/
#user {
    display: flex;
    margin-right: 30px;
}

/*下拉按钮样式*/
.dropBtn {
    color: rgba(208, 0, 0, 0.38);
    /*调整用户名和头像的间距*/
    padding: 16px;
    font-size: 16px;
    /*设置鼠标为手*/
    cursor: pointer;
    /*字体加粗*/
    font-weight: bolder;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    /*弹性盒子列布局*/
    display: inline-block;
}

/* 下拉框内容 (默认隐藏) */
.dropdown-content {
    /*默认隐藏*/
    display: none;
    /*绝对定位方式*/
    position: absolute;
    /*背景颜色*/
    background-color: #f9f9f9;
    min-width: 100px;
    /*阴影*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /*圆化*/
    border-radius: 10px;
}

/*下拉菜单里的链接内容*/
.dropdown-content a {
    /*超链接颜色*/
    color: black;
    /*定义上下左右间距*/
    padding: 12px 16px;
    /*给超链接标签去除下划线*/
    text-decoration: none;
    /*块布局*/
    display: block;
    /*字体大小*/
    font-size: 10px;
}

/*鼠标移到a标签的样式变化*/
.dropdown-content a:hover {
    background-color: rgba(203, 203, 203, 0.29);
    border-radius: 10px;
}

/*在鼠标移上去后显示下拉菜单*/
.dropdown:hover .dropdown-content {
    /*从none设置为block*/
    display: block;
    border-radius: 10px;
}

/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown:hover .dropBtn {
    color: #9face6;
    background-color: rgb(143, 239, 231);
    border-radius: 10px;
}

/*设置侧边栏列*/
.aside {
    /*去ul li的默认样式*/
    list-style-type: none;
    padding: 0;
    width: 15%;
    /*侧边栏背景色*/
    background-color: #f1f1f1;
    /*全屏高度*/
    height: 100%;
    position: fixed;
    /*如果导航栏选项多，允许滚动*/
    overflow: auto;
    margin: 0 auto;
}

/*li标签内容居中*/
.aside li {
    text-align: center;
}

/*li标签中的a标签*/
.aside a {
    line-height: 50px;
    width: 100%;
    height: 50px;
    display: block;
    color: #8d8d8d;
    /*给超链接去除下划线*/
    text-decoration: none;
}

/*鼠标移动到选项上修改背景颜色*/
.aside a:hover {
    width: 100%;
    background-color: rgb(220, 220, 220);
    color: white;
    display: block;
    text-decoration: none;

}

/*a标签活动时颜色和背景*/
.aside a.active {
    background-color: rgba(203, 203, 203, 0.29);
    color: white;
}

/*jQuery属性*/
.tab_list .current {
    background-color: rgb(220, 220, 220);
    color: white;
}

/*主内容*/
main {
    background-color: #ffffff;
    width: 85%;
    height: 88%;
    float: right;
}

/*预约表单*/
#bookForm {
    display: flex;
    float: left;
    margin-left: 30px;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
}

/*select标签的下拉框*/
#bookSelect {
    width: 120px;
    height: 30px;
    border-radius: 5px;
}

#bookSelect:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/*日期输入框*/
#dataInput {
    border: 1px solid gray;
    border-radius: 5px;
    width: 200px;
    height: 30px;
    /*margin-left: 20px;*/
}

#dataInput:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

#bookButton {
    border: none;
    margin-left: 20px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
}

#bookButton:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #7BA7AB;
}

/*价格组件*/
#priceItem {
    margin-bottom: 30px;
    margin-right: 50px;
}

#symbol2 {
    font-size: 30px;
    font-family: 新宋体, serif;
    color: #8d8d8d;
}

#symbol1 {
    font-size: 30px;
    color: #ff5c21;
}

#price {
    font-size: 50px;
    color: #ff5c21;
}

#itemSelect {
    width: 200px;
}

/*个人信息提交按钮*/
.submitButton {
    border: none;
    width: 100%;
    height: 100%;
}

.submitButton:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #7BA7AB;
}

/*商家端的上传列*/
.attributeRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}